import React, { Component } from 'react'
import {Outlet,NavLink} from "react-router-dom"
import { Tabbar } from 'react-vant';
import {mainRouter} from "../router/routerConfig"
export class Home extends Component {
  render() {
    return (
      <div className='Index'>
      <header>头部</header>
      <main>
        <Outlet></Outlet>
      </main>
      <footer>
      <Tabbar>
        {
          mainRouter.map((item,index)=>{
            return   <Tabbar.Item key={index} icon={item.icon}>
                <NavLink to={item.path}>{item.title}</NavLink>
            </Tabbar.Item>
          })
        }
      </Tabbar>
      </footer>
    </div>
    )
  }
}

export default Home